<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<title>关于我</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
		<meta name="author" content="Tantan">
		<meta name="keywords" content="檀檀 的个人主页">
		<meta name="description" content="檀檀 的个人主页">
		<link rel="shortcut icon" href="images/favicon.ico">
		<link rel="stylesheet" href="css/animate.css">
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="css/about.css">
		<script src="js/plugin/modernizr-2.6.2.min.js"></script>
		<!--[if lt IE 9]>
			<script src="js/plugin/html5shiv.min.js"></script>
			<script src="js/plugin/respond.min.js"></script>
		<![endif]-->
	</head>

	<body class="page-about">
		<!--顶部导航-->
		<header class="header"></header>

		<!-- Swiper -->
		<div class="swiper-container">
		    <div class="swiper-wrapper">

		        <div class="swiper-slide">
		      		<div class="container">
				        <h3 class="subheader">基本信息</h3>
				        <div class="row">
							<div class="col-md-6 col-sm-12 col-xs-12 animate-box" data-animate-effect="fadeInLeft">
								<div class="myphoto">
									<img class="img-responsive" src="images/about/paofu.jpg">
								</div>
							</div>
							<div class="col-md-6 col-sm-12 col-xs-12 animate-box" data-animate-effect="fadeInLeft">
								<table class="table-info">
									<tbody>
										<tr>
											<td class="title">姓名</td>
											<td class="break">:</td>
											<td>檀清华</td>
										</tr>
										<tr>
											<td class="title">生日</td>
											<td class="break">:</td>
											<td>1995.05.09</td>
										</tr>
										<tr>
											<td class="title">电话</td>
											<td class="break">:</td>
											<td>17600397866</td>
										</tr>
										<tr>
											<td class="title">邮箱</td>
											<td class="break">:</td>
											<td>435808619@qq.com</td>
										</tr>
										<tr>
											<td class="title">地址</td>
											<td class="break">:</td>
											<td>北京市昌平区西二旗</td>
										</tr>
										<tr>
											<td class="title">职业</td>
											<td class="break">:</td>
											<td>前端开发工程师</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
		      		</div>
		        </div>

				<div class="swiper-slide work">
		        	<div class="container">
						<div class="row">
							<div class="col-md-6 col-sm-12 col-xs-12 animate-box" data-animate-effect="fadeInLeft">
								<h3 class="subheader">教育经历</h3>
								
								<table class="table-info">
									<tbody>
										<tr>
											<td class="title">时间</td>
											<td class="break">:</td>
											<td>2009.09-2013.6</td>
										</tr>
										<tr>
											<td class="title">学校</td>
											<td class="break">:</td>
											<td>北京石油大学</td>
										</tr>
										<tr>
											<td class="title">专业</td>
											<td class="break">:</td>
											<td>计算机科学与技术</td>
										</tr>
										<tr>
											<td class="title">学位</td>
											<td class="break">:</td>
											<td>专科</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="col-md-6 col-sm-12 col-xs-12 animate-box" data-animate-effect="fadeInLeft">
								<h3 class="subheader">工作经历</h3>
								<div class="works">
									<li class="works-company">
										<h4>1.南京康伯石信息技术有限公司</h4>
										<p>2016.05-2018.05</p>
										<p>前端开发工程师</p>
									</li>
									<li class="works-company">
										<h4>2.LoweProfero</h4>
										<p>2015.03-2016.5</p>
										<p>网页制作</p>
									</li>
								</div>
							</div>
						</div>
		      		</div>
		        </div>
				<div class="swiper-slide skills">
		        	<div class="container">
		        		<h3 class="subheader">掌握技能</h3>
						<div class="row">
							<div class="col-md-6 col-sm-12 col-xs-12 animate-box" data-animate-effect="fadeInLeft">
								<div class="skills-list">
									<li>1.熟练使用Dreamweaver、Photoshop、Flash、Fireworks</li>
									<li>2.熟悉建站流程，熟练掌握Html、CSS、JavaScript</li>
									<li>3.熟悉Web标准，能用DIV+CSS页面布局，制作与主流浏览器兼容的的网页，熟悉Html5+CSS3标准布局</li>
									<li>4.了解PHP和Oracle、MySQL数据库相关知识</li>
									<li>5.网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。</li>
									<li>6.网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。</li>
								</div>
							</div>
							<div class="col-md-6 col-sm-12 col-xs-12 animate-box" data-animate-effect="fadeInLeft">
								<div class="skillst">
								  <div class="skillbar" data-percent="75%">
									<div class="title head-sm">
									  HTML 5
									</div>
									<div class="count-bar">
									  <div class="count"></div>
									</div>
								  </div>
								  <div class="skillbar" data-percent="70%">
									<div class="title head-sm">
									  CSS 3
									</div>
									<div class="count-bar">
									  <div class="count"></div>
									</div>
								  </div>
								  <div class="skillbar" data-percent="80%">
									<div class="title head-sm">
									  jQuery
									</div>
									<div class="count-bar">
									  <div class="count"></div>
									</div>
								  </div>
								  <div class="skillbar" data-percent="93%">
									<div class="title head-sm">
									  Bootstrap
									</div>
									<div class="count-bar">
									  <div class="count"></div>
									</div>
								  </div>
								  <div class="skillbar" data-percent="65%">
									<div class="title head-sm">
									  Photoshop
									</div>
									<div class="count-bar">
									  <div class="count"></div>
									</div>
								  </div>
								</div>
							</div>
						</div>
		      		</div>
		        </div>
		       

		    </div>
		    <!-- Add Pagination -->
		    <div class="swiper-pagination"></div>
		</div>

	

		<!--Javascript-->
		<script type="text/javascript" src="js/plugin/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="js/plugin/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="js/plugin/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/plugin/jquery.waypoints.min.js"></script>
		<script type="text/javascript" src="js/plugin/swiper.min.js"></script>
		<script type="text/javascript" src="js/common/header.js"></script>
		<script type="text/javascript" src="js/common/footer.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript">
			$(function() {
				var  i = 0;
				var swiper = new Swiper('.swiper-container', {
			        direction: 'vertical',
			        slidesPerView: 1,
			        spaceBetween: 0,
			        mousewheel: true,
			        pagination: {
			          el: '.swiper-pagination',
			          clickable: true,
			        },
			        on: {
			        		init: function() {
			        			if(this.activeIndex == 0) {
									contentWayPoint();
				        		}
			        		},
			        		slideChangeTransitionEnd: function(swiper){

			        			contentWayPoint();
				        		if(this.activeIndex == 2) {
				        			i++;
				        			if(i == 1) {
				        				var timer = setTimeout(function() {
											skillAnimate();
										}, 1500);
				        			} else {
				        				clearTimeout(timer);
				        			}
				        		}
					   		}
			        }
			    });
			});

			//Skill
			function skillAnimate() {
				$(".skillbar").each(function() {
			    	var width = $(this).attr('data-percent');
					$(this).find('.count-bar').animate({
			    		width: width
			    	}, 2000);
			    	var percent = $(this).attr('data-percent');
				    $(this).find('.count').html('<span>' + percent + '</span>');
			    });
			}
		</script>
	</body>

</html>
